<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>调试信息面板测试用例</h1>
<ul>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
	<li>站位中</li>
</ul>
<script type="text/javascript">

(function(){
	
	function DebugPanel(){
		var infoPanelHtml = '<div id="debug-info"><ul id=""><ul/><div></div></div>';
		var document = window.document;
		var body = document.body;
		var infoPanel = document.createElement("div");
		var infoList = document.createElement("ul");
		var ocBtn = document.createElement("button");
		var elementCssText = {
			infoPanel:"height:0px;-webkit-transition:height 300ms ease 0ms;overflow:hidden; background:#deebf1;",
			infoList:"",
			infoItem:"",
			ocBtn:"position: fixed;top:0;left:0;z-index:3000;"
		};
		//初始化信息面板
		function _initPanel(){
			//初始化样式
			infoPanel.style.cssText = elementCssText.infoPanel;
			infoList.style.cssText = elementCssText.infoList;
			ocBtn.style.cssText = elementCssText.ocBtn;
			ocBtn.innerHTML="打开";
			
			//组合元素
			infoPanel.appendChild(infoList);
			infoPanel.appendChild(ocBtn);
			body.insertBefore(infoPanel,body.firstChild);
		};
		
		//清除信息
		function _clearInfo(e){
			infoList.innerHTML="";
		}
		function _ocClick(){
			var height = infoPanel.style.height;
			if(height==="auto"){
				infoPanel.style.height ="0px"; 
				ocBtn.innerHTML="打开";
			}else{
				infoPanel.style.height ="auto"; 
				ocBtn.innerHTML="关闭";
			}
		}
		function _initEvent(){
			infoList.addEventListener("dblclick",_clearInfo);
			ocBtn.addEventListener("click",_ocClick);
		}
		//添加调试信息
		function _addInfo(msg){
			var li = document.createElement("li");
			li.innerHTML = msg;
			infoList.appendChild(li);
		}
		this.log = function(msg){
			_addInfo(msg);
		}
		function _init(){
			_initPanel();
			_initEvent();
		}
		_init();
	}
	var debugPanel = new DebugPanel();
	window.debugToPanel = debugPanel.log;
})();
for(var i=0;i<10;i++){
	debugToPanel("fdsfdsfds"+i);
}
</script>
</body>
</html>